Skip to main content

1. 脚手架执行原理

输入vue create vue-test-app 终端做了什么

img

脚手架的执行原理如下：

  • 在终端输入 vue create vue-test-app

  • 终端解析出 vue 命令

  • 终端在环境变量中找到 vue 命令

    • 在终端中找到vue命令的方法：which vue

  • 终端根据vue命令链接到实际文件 vue.js

    • 找到vue(软链接),找到vue.js

  • 终端利用node执行 vue.js

  • vue.js 解析command/options

  • vue.js 执行command/options

  • 执行完毕，退出执行

2. 从应用角度看如何开发一个脚手架

这里以 vue-cli 为例：

  • 开发 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm
  • 将 npm 项目安装到 node 的 lib/node_modules
  • 在 node 的 bin 目录下配置 vue 软连接指向 lib/node_modules/@vue/cli/bin/vue.js

这样我们在执行vue命令的时候就可以找到 vue.js 进行执行

3. 还有很多疑问需要解答

为什么全局安装@vue/cli后会添加的命令为vue?​

npm install -g @vue/cli

答：在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的

"bin":{ // 配置软链接
  "vue": "bin/vue.js"
}

这个软连接的名称就是vue，所以添加后的命令为vue

全局安装@vue/cli时发生了什么?​

  • 先把 @vue/cli 下载到 /usr/local/lib/node_modules 中，
  • 然后解析 @vue/cli 下的 package.json，
  • 根据 bin 中的定义去 /usr/local/bin/ 下去定义 @vue/cli 的软连接 vue

执行vue发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令直接去执行它?​

  1. 终端在环境变量中找vue指令（相当于which vue命令），看有没有被注册，未注册则返回command not found,
  2. 注册了则去找vue指令软连接指向的地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js，去执行vue.js文件中的代码
  3. 因为这个js文件的顶部写了#!/usr/bin/env node,标识在环境变量中查找node，告诉系统使用node去执行这个js文件

脚手架原理进阶

1. 为什么说脚手架本质是操作系统的客户端？它和我们在PC上安装的应用/软件有什么区别？​

1.node在window中是一个node.exe，在Mac中是一个可执行文件（node*）,因为node是操作系统的一个客户端，脚手架的本质是通过node去执行js文件，所以也可以说脚手架的本质是操作系统的客户端。

2.本质来说没有区别，PC安装的应用只是提供了一个GUI，脚手架是通过命令的形式

2. 如何为node脚手架命令创建别名？​

进入/usr/local/bin目录

ln -s ./imooc-test-cai imooc-test-cai2

img

3. 描述脚手架命令执行的全过程。​

img

扩展一下，有的同学可能会问下面两种写法的区别?

#!/usr/bin/env node
#!/usr/bin/node
  • 第一种是在环境变量中查找node (推荐使用这种方法)
  • 第二种是直接执行/usr/bin/目录下的node
  • 第一种的写法兼容性比较好，第二种别人的node目录不一定在/usr/bin目录中。